<template>
  <div>
    <el-form label-width="120px" :model="formData">
      <el-form-item label="节点ID">
        <el-input v-model="formData.id" disabled readonly />
      </el-form-item>
      <el-form-item label="节点编码">
        <el-input
          v-model="formData.code"
          :disabled="isDetail"
          :readonly="isDetail"
        />
      </el-form-item>
      <el-form-item label="节点名称">
        <el-input
          v-model="formData.text"
          :disabled="isDetail"
          :readonly="isDetail"
        />
      </el-form-item>
      <el-form-item label="顺序流类型">
        <el-select
          v-model="formData.conditionType"
          class="m-2"
          :disabled="isDetail"
          placeholder="Select"
          :readonly="isDetail"
        >
          <el-option
            v-for="(item, index) in conditionTypeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="formData.conditionType === ConditionType.Condition"
        label="条件表达式"
      >
        <el-input
          v-model="formData.conditionalExpression"
          :disabled="isDetail"
          :readonly="isDetail"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="isDetail"
          :readonly="isDetail"
          type="primary"
          @click="onSubmit"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
  import { ConditionType } from './condition.enum'
  const props = defineProps({
    nodeData: {
      type: Object,
      default: () => {},
    },
    lf: {
      type: Object,
      default: () => {},
    },
    isDetail: {
      type: Boolean,
      default: false,
    },
  })

  const emit = defineEmits(['onClose'])
  const conditionTypeList = [
    {
      value: ConditionType.DefaultType,
      label: '默认顺序流',
    },
    {
      value: ConditionType.Condition,
      label: '条件顺序流',
    },
  ]

  const formData = ref({
    code: '',
    text: '',
    conditionType: 0,
    conditionalExpression: '',
  })

  onMounted(() => {
    const { properties, text, id } = props.nodeData
    formData.value.id = id
    if (properties) {
      formData.value = Object.assign({}, formData.value, properties)
    }
    if (text && text.value) {
      formData.value.text = text.value
    }
  })

  const onSubmit = () => {
    const { id } = props.nodeData
    props.lf.setProperties(id, {
      ...formData.value,
    })

    props.lf.updateText(id, formData.value.text)

    emit('onClose')
  }
</script>
